<style scoped>
.main {
    width: 100%;
    height: 100%;
    background: url('https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/bg/question/question_bg.jpg');
    background-repeat:no-repeat;
    background-position:center center;
}
.head {
    width: 100%;
    height: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.image{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.profile {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.content{
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.timer{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    font-size:20px;
    background: url('https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/bg/question/question_top.png');
    background-size:100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.react{
    height: 80%;
    width: 80%;
    border-radius: 5%;
    /*border: black solid 2px;*/
    background: url('https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/bg/question/question_rect.png');
    background-repeat:no-repeat;
    background-position:center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.select{
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    height: 10%;
    width: 80%;
    /*border-radius: 5%;*/
    /*background: rgb(190, 188, 188);*/
    background: url('https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/bg/question/ans_before.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 10px;
    padding: 5px;
}
.ans_right{
    background: url('https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/bg/question/ans_right.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.ans_wrong{
    background: url('https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/bg/question/ans_wrong.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.title{
    font-size: 20px;
    margin-bottom: 20px;
}
</style>

<template>
    <div class="main">
        <div class="head">
            <div class="image">
                <img class="profile" :src="this.$route.query.my" alt="">
                <span style="font-size:25px">{{my_score}}</span>
            </div>
            
            <div style="font-size:30px; margin:10px">VS</div>
            <div class="image">
                <img class="profile" :src="this.$route.query.rival" alt="">
                <span style="font-size:25px">{{rival_score}}</span>
            </div>
        </div>
        <div class="content">
            <div class="timer" id="timer">{{timerCount}}</div>
            <div class="react">
                <div class="title">{{quesiton.content}}</div>
                <div class="select" id="A" @click="choose('A')">{{quesiton.a}}</div>
                <div class="select" id="B" @click="choose('B')">{{quesiton.b}}</div>
                <div class="select" id="C" @click="choose('C')">{{quesiton.c}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { baseURL } from '../config' 
export default {
    name: 'PK',
    data() {
        return {
            chooseFlag: 0,//0为非答题置timerCount=0（即10秒自然流逝后归0，要显示2秒答案，再走下一题或结束），1为有人答题置timerCount=0（即在时间限制内有人答了题）
            timerCount: 15,
            number: 1,
            my_score: 0,
            rival_score: 0,
            quesiton:{
                id: null,
                content: '垃圾分类有几种',
                a: '',
                b: '',
                c: '',
            }
        }
    },
    methods:{
        choose(id){
            let data = {
                id: this.quesiton.id,
                answer: id
            }

            //改变选项背景
            if (id === this.quesiton.answer){
                document.getElementById(id).classList.add("ans_right")
            }else {
                document.getElementById(id).classList.add("ans_wrong")
                document.getElementById(this.quesiton.answer).classList.add("ans_right")
            }

            this.$websocket.send(JSON.stringify(data));
        },

        getQuestion(number){
            this.timerCount = 15;//先恢复定时器
            this.$Axios({
                method: 'get',
                url: baseURL + '/question/getQuestion/'+number
            }).then((res)=>{
                this.quesiton = res.data.msg
            });

            this.chooseFlag = 0;//再恢复标志。否则会出现chooseFlag = 0、timerCount = 0，直接快速跳到下一题了
            this.timerCountFun();//15秒倒计时
        },

        isResult(){
            //延迟2s再走下一题或结束
            this.$websocket.sleep(5000).then(()=>{
                document.getElementById("A").classList.remove("ans_right","ans_wrong")
                document.getElementById("B").classList.remove("ans_right","ans_wrong")
                document.getElementById("C").classList.remove("ans_right","ans_wrong")
                if(this.number === 5){
                  let result = this.my_score >= this.rival_score?'Y':'N';
                  this.$router.push({path: '/result', query: {result: result}});
                  this.$websocket.close();
                }
                else this.getQuestion(++this.number);
            })
        },

        //15秒定时器
        timerCountFun() {
            if(this.timerCount <= 0){

                if (this.chooseFlag === 0){//无人答题，自然归零，就调结果
                    document.getElementById(this.quesiton.answer).classList.add("ans_right");
                    this.isResult();
                }

            }else {
                setTimeout(() => {
                  this.timerCount --;
                  this.timerCountFun()
                }, 1000)
            }
        }
    },

    mounted(){
        this.getQuestion(this.number);
        let _this = this;
        this.$websocket.ws.onmessage = function(message){

            _this.chooseFlag = 1;//有人答题的标志
            //定时器置0
            _this.timerCount = 0

            let data = JSON.parse(message.data);
            if (data['rival'] === 'N'){
                (data['is'] === 'Y')?_this.my_score += 10:_this.my_score -= 10;
            }
            else{
                (data['is'] === 'Y')?_this.rival_score += 10:_this.rival_score -= 10;
            }
            _this.isResult();
            
        }
    }
}
</script>

